<template>
  <div>
    <van-nav-bar title="商品详情"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-image width="300"
               height="300"
               :src="data.images[0].imgUrl" />
    <van-row>
      <van-col span="24"
               style="height:20px">
        价格：{{price}} 库存：{{data.info.stock}}
      </van-col>

      <van-col span="24">
        <van-field v-model="num"
                   :input="changeNum(num)"
                   type="digit"
                   label="整数" />
      </van-col>
      <van-col span="24">
        <van-cell is-link
                  title="使用优惠券"
                  @click="couponCanUse" />

        <van-action-sheet v-model="show"
                          title="可用优惠券">
          <div class="content">
            <van-card v-for="(item,index) in coupons"
                      :key="index"
                      :price="item.amount.toFixed(2)"
                      :desc="item.couponTypeLabel"
                      :title="item.couponName"
                      :thumb="item.couponImg"
                      @click-thumb="useCoupon(item)">
              <template #tags>
                <van-tag plain
                         type="danger">满{{item.minPoint.toFixed(2)}}元</van-tag>
                <van-tag plain
                         type="danger">减{{item.amount.toFixed(2)}}元</van-tag>
              </template>

            </van-card>
          </div>
        </van-action-sheet>
      </van-col>
      <van-col span="24">
        <van-card v-for="(item,index) in hasSelectList"
                  :key="index"
                  :price="item.amount.toFixed(2)"
                  :desc="item.couponTypeLabel"
                  :title="item.couponName"
                  :thumb="item.couponImg"
                  @click-thumb="useCoupon(item)">
          <template #tags>
            <van-tag plain
                     type="danger">满{{item.minPoint.toFixed(2)}}元</van-tag>
            <van-tag plain
                     type="danger">减{{item.amount.toFixed(2)}}元</van-tag>
          </template>

        </van-card>
      </van-col>
      <van-action-sheet v-model="prepayReviewState"
                        :actions="actions"
                        @select="onSelectAction" />
    </van-row>

    <van-action-sheet v-model="memberPayPass"
                      style="height:300px">
      <van-password-input :value="password"
                          :focused="showKeyboard"
                          @focus="showKeyboard = true" />

      <van-number-keyboard v-model="password"
                           :show="showKeyboard"
                           theme="custom"
                           close-button-text="完成"
                           @close="passValue"
                           @blur="showKeyboard = false"
                           @delete="onDelete" />
    </van-action-sheet>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o"
                             text="客服" />
      <van-goods-action-icon icon="cart-o"
                             text="购物车" />
      <van-goods-action-icon icon="shop-o"
                             text="店铺" />
      <van-goods-action-button type="danger"
                               :text="goumai"
                               @click="onClickButton" />
    </van-goods-action>
  </div>
</template>
<script>
import { getGoodsSkuInfo } from '@/api/goodsSkuInfo'
import { canUse, prepayReview, prepay,finishiPay } from '@/api/couponService'
import { Dialog } from 'vant';
import { finishOrder } from '@/api/memberWallet'
import { Toast } from 'vant';

export default {
  components: {},
  props: {},
  data () {
    return {
      id: 0,
      data: {},
      price: 0,
      num: 1,
      skuId: 0,
      suborderId:0,
      memberPayPass: false,
      MemberPayDTO: {},
      goumai: "立即购买",
      prepayReviewState: false,
      show: false,
      showKeyboard:false,
      coupons: [],
      hasSelectList: [],
      orderPre: {
        goodList: [{
          num: 1,
          skuId: 0,
          userRemarks: ''
        }],

        couponSpuUse: {
          spuId: 0,
          couponIds: [],
          total: 0.00
        },
        total: 0.00,
        name: "周林静",
        userAddr: "山东省烟台市芝罘区毓璜顶医院3楼102市",
        userId: 0,
        payType: 0,
        userPhone: "15376605924"
      },
      goodsVO: {
        num: 1,
        skuId: this.id,
        userRemarks: ''
      },
      couponsCanUse: {
        spuId: 0,
        couponIds: [],
        total: 0.00
      },
      actions: [{ name: '微信支付', type: 1 }, { name: '会员支付', type: 6 }, { name: '支付宝支付', type: 2 }, { name: '积分兑换', type: 4 }],
       password: '',
    }
  },

  computed: {},
  watch: {

  },
  methods: {
    load () {
      getGoodsSkuInfo({ id: this.id }).then(res => {
        this.data = res.data.data
        this.skuId = res.data.data.info.id
        this.price = res.data.data.info.price
        this.couponsCanUse.spuId = res.data.data.info.spuId
        this.goumai = "立即购买" + this.price * this.num
      })

    },
    onDelete () {

    },
    couponCanUse () {
      this.couponsCanUse.total = this.price * this.num
      canUse(this.couponsCanUse).then(res => {
        if (res.data.code === 100200)
        {
          this.show = true
          this.coupons = res.data.data
        }
      })
    },
    passValue () {
      const p = this.password
      console.log("密码", this.password)
      this.actionSheetShow = false
      this.memberPayPass = false
      this.MemberPayDTO.password = p
      this.MemberPayDTO.orderId = this.suborderId
      finishOrder(this.MemberPayDTO).then(res => {
        this.password = ''
        if (res.data.code === 100200)
        {
          Toast(res.data.message)

        } else
        {
          Toast(res.data.message)
        }
        
      })

    },
    onClickLeft () {
      this.$router.push({
        path: '/home'
      })
    },
    changeNum (v) {
      this.couponsCanUse.total = this.price * v
      this.orderPre.goodList[0].num = v
    },
    onClickButton () {
      this.orderPre.couponSpuUse = []
      this.orderPre.couponSpuUse.push(this.couponsCanUse)
      this.orderPre.goodList[0].skuId = this.skuId
      console.log(this.orderPre);

      prepayReview(this.orderPre).then(res => {
        if (res.data.code === 100200)
        {
          this.prepayReviewState = true
          this.orderPre.total = res.data.data
          this.goumai = "立即购买" + res.data.data
        } else
        {
          Dialog({ message: res.data.message });
        }

      })
    },
    onSelectAction (item) {
      this.orderPre.payType = item.type
      prepay(this.orderPre).then(res => {
        if (res.data.code === 100200)
        {
          
          if (item.type === 6)
          {
            this.suborderId = res.data.data.id
            this.memberPayPass = true
          }else{

            finishiPay({ orderId: res.data.data.order.id}).then(aas=>{
              if(aas.data.code===100200){
                Toast("支付成功")
              }
            })
          }
        } else
        {
          Dialog({ message: res.data.message });
        }
      })
    },
    useCoupon (item) {

      this.couponsCanUse.couponIds.push(item.id)
      this.hasSelectList.push(item)
      this.couponCanUse()
      this.orderPre.couponSpuUse = []
      this.orderPre.couponSpuUse.push(this.couponsCanUse)
      this.orderPre.goodList[0].skuId = this.skuId
      prepayReview(this.orderPre).then(res => {
        if (res.data.code === 100200)
        {
          this.orderPre.total = res.data.data
          this.goumai = "立即购买" + res.data.data
        } else
        {

          Dialog({ message: res.data.message });
        }

      })
    }
  },
  created () {
    this.id = this.$route.query.id
    this.load()
  },
  mounted () { },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { }
}
</script>
<style lang='less'>
.content {
  padding: 16px 16px 160px;
}
</style>